/*
 * @Author: zhangxin 411020991@qq.com
 * @Date: 2023-04-11 09:11:21
 * @LastEditors: zhangxin 411020991@qq.com
 * @LastEditTime: 2023-04-19 09:52:13
 * @FilePath: \CIMS-V6_Frontend\main\src\pages\User\RetrievePassword\index.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useRef } from 'react';
import './index.less';
import { Button, Form, Input, Card } from 'antd';
import { useIntl } from '@umijs/max';
import ReactSimpleVerify from 'react-simple-verify';
import 'react-simple-verify/dist/react-simple-verify.css';
import LogoHeader from '../components/LogoHeader/index'
const { Search } = Input;



const index = () => {
  const [isShow, setIsShow] = useState(false);
  const [isHide, setIsHide] = useState(true);
  const [successTips, setSuccessTips] = useState('');
  const [movedColor, setmovedColor] = useState('');
  const [emailValue, setEmailValue] = useState('');
  const [phoneValue, setPhoneValue] = useState('')
  const intl = useIntl()
  const verify = useRef(true)
  const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
  const onFinish = (values) => {
    setEmailValue(values.useename)
    setPhoneValue(values.phone)
    setIsHide(false)
    console.log('Success:', values);

  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  // 滑块验证通过逻辑
  const success = () => {
    if (regEmail.test(emailValue)) {
      setSuccessTips(intl.formatMessage({
        id: 'TEXT_60',
        defaultMessage: '验证通过'
      }))
      setIsShow(true)
      setmovedColor('#2979ff')
    } else {
      setSuccessTips(intl.formatMessage({
        id: 'TEXT_61',
        defaultMessage: '验证失败'
      }))
      setmovedColor('#fe0000')
    }
  }
  //reset()滑块重置方法
  const reset = () => {
    verify.current.reset()
  }
  // 验证账号：输入框值发生变化的方法
  const onChange = (e) => {
    // console.log(e.target.value);
    setEmailValue(e.target.value)
    reset()
  }
  //验证码输入框的值
  const changePhone = (e) => {
    console.log(e.target.value);
    setPhoneValue(e.target.value)
  }
  // 点击获取验证码按钮的回调
  const onSearch = () => {
    console.log(123);
  }

  return (
    <div className='bodyBack'>
      <div className='box-center'>
      <LogoHeader />
      {
        isHide ?
          <Card
            title={
              <>
                {intl.formatMessage({
                  id: 'TEXT_66',
                  defaultMessage: '找回密码',
                })}-
                {intl.formatMessage({
                  id: 'TEXT_58',
                  defaultMessage: '验证账号',
                })}
              </>
            }

            style={{
              width: 800,
              height: 480,
              padding: '0 41px',
              position: 'relative',
            }}
            headStyle={{
              padding: 0,
              minHeight: 48,
              fontSize: 12,
            }}
            bodyStyle={{
              padding: 0
            }}
          >
            <Form
              // name="basic"
              style={{
                marginLeft: 135,
              }}
              layout='vertical'
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                style={{
                  margin: '36px 0px 16px'
                }}
                label={
                  intl.formatMessage({
                    id: 'TEXT_23',
                    defaultMessage: '账号'
                  })
                }
                name="username"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input
                  style={{
                    width: '320px',
                    height: '32px',
                    borderRadius: '4px'
                  }}
                  placeholder='请输入手机号/邮箱'
                  onChange={onChange}
                />
              </Form.Item>

              <Form.Item
                style={{
                  margin: '0 0 12px'
                }}
              >
                <ReactSimpleVerify
                  successTips={successTips}
                  success={success}
                  ref={verify}
                  movedColor={movedColor}
                  width={320}
                  height={29}
                  tips={
                    intl.formatMessage({
                      id: 'TEXT_62',
                      defaultMessage: '请按住滑块，拖动到最右边',
                    })
                  }
                />
              </Form.Item>
              {
                isShow ?
                  <Form.Item
                    style={{
                      margin: '0 0 12px'
                    }}
                    label={
                      intl.formatMessage({
                        id: 'TEXT_47',
                        defaultMessage: '验证码'
                      })
                    }
                    name="phone"
                    rules={[
                      {
                        required: true,
                        message: 'Please input your username!',
                      },
                    ]}
                  >
                    <Search
                      placeholder="手机号"
                      allowClear
                      enterButton={
                        intl.formatMessage({
                          id: 'TEXT_38',
                          defaultMessage: '获取验证码'
                        })
                      }
                      onChange={changePhone}
                      onSearch={onSearch}
                      style={{
                        width: '320px',
                        height: '32px',
                        borderRadius: '4px',
                        fontSize: '14px !important'
                      }}
                    />
                  </Form.Item>
                  : <></>
              }

              <Form.Item
              >
                <Button className={phoneValue === '' ? 'next-but' : 'primary-but'} htmlType="submit"
                  style={{
                    margin: '12px 0 0'
                  }}
                >
                  {intl.formatMessage({
                    id: 'TEXT_57',
                    defaultMessage: '下一步',
                  })}
                </Button>
              </Form.Item>
            </Form>
            <div className='box-footer'>
              <p>{
                intl.formatMessage({
                  id: 'TEXT_67',
                  defaultMessage: '特别说明'
                })
              }
              </p>
              <p>
                {
                  intl.formatMessage({
                    id: 'TEXT_68',
                    defaultMessage: '1. 找回步骤：输入账号，验证账号 - 完成账号验证 - 设置新密码'
                  })
                }
              </p>
              <p>
                {
                  intl.formatMessage({
                    id: 'TEXT_69',
                    defaultMessage: '2. 进行身份验证时，若无法验证，可联系系统技术支持服务（+028-85111460），协助修改验证信息'
                  })
                }
              </p>
              <p>
                {
                  intl.formatMessage({
                    id: 'TEXT_70',
                    defaultMessage: '3. 发送验证码后，您可以在手机短信或邮箱中获取（1分钟内未收到，建议在垃圾短信/邮件中查看）'
                  })
                }
              </p>
            </div>
          </Card>
          :

          <Card
            title={
              <>
                {intl.formatMessage({
                  id: 'TEXT_66',
                  defaultMessage: '找回密码',
                })}-
                {intl.formatMessage({
                  id: 'TEXT_73',
                  defaultMessage: '修改密码',
                })}
              </>
            }

            style={{
              width: 800,
              height: 480,
              padding: '0 41px',
              position: 'relative',
            }}
            headStyle={{
              padding: 0,
              minHeight: 48,
              fontSize: 12,
            }}
            bodyStyle={{
              padding: 0
            }}
          >
            <Form
              style={{
                marginLeft: 135,
              }}
              layout='vertical'
              initialValues={{
                remember: true,
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                style={{
                  margin: '36px 0px 16px'
                }}
                label={
                  intl.formatMessage({
                    id: 'TEXT_71',
                    defaultMessage: '设置密码'
                  })
                }
                name="username"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input
                  style={{
                    width: '320px',
                    height: '32px',
                    borderRadius: '4px'
                  }}
                  placeholder='请输入密码'
                  onChange={onChange}
                />
              </Form.Item>

              <Form.Item
                style={{
                  margin: '12px 0px 4px'
                }}
                label={
                  intl.formatMessage({
                    id: 'TEXT_72',
                    defaultMessage: '确认密码'
                  })
                }
                name="username"
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input
                  style={{
                    width: '320px',
                    height: '32px',
                    borderRadius: '4px'
                  }}
                  placeholder='请再次输入密码'
                  onChange={onChange}
                />
              </Form.Item>


              <Form.Item
              >
                <Button className={phoneValue === '' ? 'next-but' : 'primary-but'} htmlType="submit"
                  style={{
                    margin: '12px 0 0'
                  }}
                >
                  {intl.formatMessage({
                    id: 'TEXT_74',
                    defaultMessage: '完成',
                  })}
                </Button>
              </Form.Item>
            </Form>
            <div
              className='boxs-footer'
            >
              <p>
                {
                  intl.formatMessage({
                    id: 'TEXT_67',
                    defaultMessage: '特别说明'
                  })
                }
              </p>
              <p>
                {
                  intl.formatMessage({
                    id: 'TEXT_75',
                    defaultMessage: '1. 密码规则：必须由字母、数字、特殊字符组成，且长度必须大于8位；'
                  })
                }
              </p>
            </div>
          </Card>
      }
      </div>
    </div>
  )
}

export default index